﻿var Module_ManagerList;
var Module_ManagerStore;
var Module_ManagerTreeStore;
var Module_ManagerParentId
// 功能模块grid展示
Module_ManagerList = function (id) {

    Ext.Loader.setConfig({ enabled: true });
    Ext.Loader.setPath('Ext.ux', '../../js/ext/ux');
    Ext.require([
    'Ext.ux.comboboxtree'
]);
    // 创建tab选项卡 

    var tabs = Ext.createWidget('tabpanel', {
        id: "ManagerTabs",
        activeTab: 0,
        width: Ext.get("MainTab").getWidth() - 210,
        height: Ext.get("MainTab").getHeight() - 30,
        split: true,
        border: true,
        headerStyle: 'display: none',
        frameHeader: false,
        hideMode: 'display:none',
        layout: 'fit',
        frame: true,
        defaults: {
            autoScroll: true,
            bodyPadding: 0
        },
        items: [{
            id: "Module_ManagerId",
            title: '管理文章',
            //bodyStyle: "background:#E3E9E7 url(/CSS/Images/bg2.jpg) repeat-x; ",
            enableTabScroll: false, //挤的时候能够滚动收缩
            html: "你好",
            closable: true,
            enableTabScroll: true, //挤的时候能够滚动收缩
            autoDestroy: true

        }]


    })
    // tree start create('Ext.Viewport'

    Module_ManagerTreeStore = Ext.create('Ext.data.TreeStore', {
        fields: ['id', 'text', 'url', 'channelType', 'isPart'],
        proxy: {
            type: 'ajax',
            url: '/Manager/Module_Manager/List/m'
        },
        root: {
            text: '所有栏目',
            id: "0",
            url: "",
            isPart: '0',
            expanded: true
        },
        folderSort: true,
        sorters: [{
            property: 'text',
            direction: 'ASC'
        }]
    });

    var tree = Ext.create('Ext.tree.Panel', {
        id: 'ManagerTreePanel',
        store: Module_ManagerTreeStore,
        split: true,
        border: true,
        collapsible: false,
        columnWidth: 1 / 5,
        width: 160,
        height: Ext.get("MainTab").getHeight() - 30,
        minSize: 120,
        maxSize: 360,
        listeners: {
            'itemclick': function (view, node) {
                if (node.data.isPart == '1') {
                    //alert("添加" + node.data.id + "    " + node.data.url);
                    var centerPanel = Ext.getCmp("ManagerTabs");
                    // 根据id获取centerPanel组件的直接子组件的引用
                    //alert("添加" + node.data.id + "    " + node.data.url);
                    // 根据id获取centerPanel组件的直接子组件的引用
                    var tab = centerPanel.getComponent(node.data.id);
                    if (!tab) {
                        //alert(node.data.channelType + "3#" + node.data.id);
                        // 这个要传到load页去，很关键，以后的布局要靠它
                        //console.log("添加" + node.data.id + "    " + node.data.url);
                        var tabTemp = tabs.add({
                            id: node.data.id,
                            title: "&nbsp;" + node.data.text + "&nbsp;",
                            loader: {
                                url: '/manager/Module_' + node.data.channelType + '/Index/' + node.data.id,
                                contentType: 'html',
                                autoLoad: true,
                                scripts: true,
                                scope: this,
                                loadMask: true
                            },
                            closable: true,
                            enableTabScroll: true, //挤的时候能够滚动收缩
                            autoDestroy: true
                        });
                        tabs.setActiveTab(tabTemp);
                        tabs.doLayout();
                    }
                    else {
                        tabs.setActiveTab(tab);
                        // console.log("显示" + node.data.id + "    " + node.data.url);
                    }
                }
            }
        }
    });

    var panel = Ext.create('Ext.Panel', {
        id: 'main-panel',
        baseCls: 'x-plain',
        renderTo: "Module_ManagerMain",
        margins: '35 5 5 0',
        layout: {
            type: 'table',
            columns: 2
        },
        // applied to child components
        defaults: { frame: true, layout: 'anchor',
            defaults: {
                anchor: '100%'
            }
        },
        items: [
                            tree,
                            tabs
                          ]
//        listeners: {
//            'click': {
//                element: 'el', //bind to the underlying el property on the panel
//                fn: function () { console.log('click el'); }
//            }
//        }
    });

}
    Module_ManagerList(0);
